<template>
    <uni-calendar
    ref="calendar"
    :insert="insert"
    :lunar="lunar"
    :range="range"
	:clearDat="false"
    :start-date="startDate"
    :end-date="endDate"
    @change="changeDate"
	@confirm="changeConfirm"
	@close="changeClose"
     />
</template>

<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    data(){
        return {
        }
    },
	watch: {
		value(val) {
			if (val) {
				this.open()
			}
		}
	},
	computed: {
		range() {
			return this.type === 'range'
		}
	},
    props: {
        value: {
            type: Boolean,
            default: false
        },
		position: {
            type: String,
            default: 'bottom'
        },
		startDate: {
            type: String,
            default: ''
        },
		endDate: {
		    type: String,
		    default: ''
		},
		lunar: {
            type: Boolean,
            default: false
        },
		type: {
            type: String,
            default: ''
        },
		insert: {
            type: Boolean,
            default: false
        }
    },
    methods: {
		handleChange({show, type}) {
			this.$emit('change', show)
		},
		open() {
			this.$refs.calendar && this.$refs.calendar.open()
		},
		changeDate(e) {
			console.log(e)
		},
		changeConfirm(e) {
			let time = e.range.before || e.range.after
			let arr = time ? [time, e.range.after || time] : []
			if (!arr.length && e.fulldate) {
				arr = [e.fulldate, e.fulldate]
			}
			this.$emit('confirm', arr)
		},
		changeClose(e) {
			this.$emit('change', false)
		},
    }
}
</script>

<style lang="scss" scoped>
    .uni-popup {
		z-index: 9999;
		:deep(.uni-popup__wrapper){
			background-color: #fff !important;
			border-radius: 16px 16px 0 0;
			max-height: 88vh;
			overflow-y: auto;
		}
    }
</style>